<template>
	<div class="add_permission_container" v-loading="loading">
		<div class="users">
			<el-table :data="searchs(search)" style="width: 100%" max-height="500">
				<el-table-column prop="username" label="用户" width="180"></el-table-column>
				<el-table-column align="left" width="200">
					<template slot="header" slot-scope="scope">
						<span style="dispaly:none">{{scope.row}}</span>
						<el-input v-model="search" size="mini" placeholder="输入权限代码搜索" />
					</template>
					<template slot-scope="scope">
						<el-button
							:type="scope.row.color?'success':'primary'"
							size="mini"
							@click="choised(scope.$index, scope.row)"
						>选择</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div v-show="flag" class="permissions">
			<div class="chiose_user">{{chiose_user}}</div>
			<el-transfer
				filterable
				:filter-method="filterMethod"
				filter-placeholder="请输入权限代码"
				:button-texts="['移除', '增加']"
				:titles="['所有权限', '拥有权限']"
				v-model="value"
				:data="data"
				@change="submit_permissions"
			></el-transfer>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			data: [],
			value: [],
			filterMethod(query, item) {
				return item.label.indexOf(query) > -1;
			},
			search: "",
			tableData: [],
			chiose_user: null,
			flag: true,
			chiosID: 0,
			chiose_user_info: null,
			user_infos: {},
			loading: false
		};
	},
	methods: {
		// 搜索功能
		searchs(kw) {
			let searchingList = [];
			this.tableData.forEach(item => {
				if (item.username.indexOf(kw) != -1) {
					searchingList.push(item);
				}
			});
			return searchingList;
		},
		// 获取用户列表
		get_user_list() {
			this.$ajax
				.get("/user")
				.then(res => {
					this.tableData = res.data.results;
					this.searchs(this.search)[0].color = true;
					this.chiose_user = this.searchs(this.search)[0].username;
					this.get_user_permissions(this.tableData[0].id);
					let that = this;
					setTimeout(function() {
						that.loading = false;
					}, 300);
				})
				.catch(err => {});
		},
		// 选择用户
		choised(index, item) {
			this.searchs(this.search).forEach((items, indexs) => {
				if (indexs == index) {
					items.color = true;
				} else {
					items.color = false;
				}
			});
			this.chiose_user = item.username;
			this.get_user_permissions(item.id);
		},
		// 获取选择用户的所有权限--用户信息
		get_user_permissions(id) {
			this.$ajax.get("/user/" + id).then(res => {
				this.value = [];
				console.log(res.data);
				this.chiose_user_info = res.data;
				if (this.data.length > 0) {
					this.data.forEach((item, index) => {
						res.data.user_permissions.forEach(items => {
							if (item.label == items.codename) {
								this.value.push(index);
							}
						});
					});
				} else {
				}
			});
		},
		// 获取权限列表
		get_permissions() {
			this.$ajax.get("/permissions").then(res => {
				// console.log(res.data)
				res.data.forEach((item, index) => {
					let obj = {
						label: item.codename,
						key: index,
						id: item.id
					};
					this.data.push(obj);
					
				});
			});
		},
		// 改变权限 -- 目前存在漏洞（修改权限不应该同时修改用户名跟手机号;需要在后台再细分对应序列化器）
		submit_permissions() {
			let new_permissions_list = [];
			this.value.forEach(item => {
				new_permissions_list.push(this.data[item].id);
			});
			this.$ajax
				.put("/user/" + this.chiose_user_info.id + "/", {
					user_permissions: new_permissions_list,
					username: this.chiose_user_info.username,
					mobile: this.chiose_user_info.mobile
				})
				.then(res => {
					this.get_user_infos(); // 操作成功则更新当前操作用户的信息
					this.$message({
						message: "操作成功！",
						type: "success"
					});
				})
				.catch(err => {
					console.log(err);
					if (err.status == 403) {
						this.$message({
							message: "暂无操作权限",
							type: "warning"
						});
					} else {
						this.$message({
							message: "服务器错误",
							type: "warning"
						});
					}
				});
		},
		get_user_infos(flag) {
			this.$ajax
				.get("/user")
				.then(res => {
					res.data.results.forEach(item => {
						if (item.username == this.user_infos.username) {
							window.localStorage.setItem(
								"user",
								JSON.stringify(item)
							);
						}
					});
					// this.$router.push({ name: "index" });
				})
				.catch(err => {
					if (flag) {
						this.$message({
							message: "获取用户失败",
							type: "warning"
						});
					} else {
					}
				});
		}
	},
	mounted() {
		this.loading = true;
		this.get_user_list();
		this.get_permissions();
		this.user_infos = JSON.parse(window.localStorage.getItem("user"));
	}
	// watch: {
	//     search(){
	//         this.tableData.forEach(item=>{
	//             item.color = false;
	//         });
	//         this.chiose_user = null
	//     }
	// },
};
</script>


<style lang="scss" scoped>
.add_permission_container {
	display: flex;
	.permissions {
		margin-left: 80px;
		.chiose_user {
			font-size: 21px;
			font-style: italic;
			text-align: center;
			padding: 5px;
			border-bottom: 1px solid #ccc;
		}
	}
}
</style>